import { useMediaQuery } from '@/utils/useMediaQuery';
import { useIntl } from '@umijs/max';
import { Flex } from 'antd';
import cls from 'classnames';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts/core';
import React from 'react';
import Styles from './BatteryInfo.less';

export interface BatteryInfoProps {
  stationSoc?: number;
  soc?: {
    boxName?: string;
    min?: string;
    max?: string;
  };
  temperature?: {
    boxName?: string;
    min?: string;
    max?: string;
  };
  voltageExtreme?: {
    boxName?: string;
    min?: string;
    max?: string;
  };
  currentExtreme?: {
    boxName?: string;
    min?: string;
    max?: string;
  };
  isOldStation?: boolean;
}

const BatteryInfo: React.FC<BatteryInfoProps> = ({
  stationSoc,
  soc,
  temperature,
  voltageExtreme,
  currentExtreme,
  isOldStation = false,
}) => {
  const intl = useIntl();
  const getOptions = () => ({
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%',
      position: 'right',
    },
    grid: {
      left: '0',
      right: 0,
    },
    series: [
      {
        name: 'Base Color',
        type: 'gauge',
        center: ['45%', '50%'],
        radius: '100%',
        detail: { show: false },
        axisLabel: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 10,
            color: [[1, '#F0F1F5']],
          },
        },
        axisTick: {
          splitNumber: 5,
          length: 3,
          lineStyle: {
            width: 1,
            color: '#d1d5e0',
          },
        },
        splitLine: {
          length: 10,
          lineStyle: {
            width: 2,
            color: '#d1d5e0',
          },
        },
        pointer: {
          icon: 'path://M11.4 54C10.3 42.8 6.29997 0 6.29997 0C6.29997 0 2.29997 42.8 1.09997 54C0.799972 57.4 0.899972 59.3 0.899972 59.3C1.19997 61.9 3.39997 64 6.19997 64C8.99997 64 11.3 61.9 11.5 59.3C11.6 59.3 11.7 57.5 11.4 54ZM6.29997 61.4C4.79997 61.4 3.69997 60.3 3.69997 58.9C3.69997 57.6 4.89997 56.5 6.29997 56.5C7.69997 56.5 8.89997 57.6 8.89997 58.9C8.89997 60.3 7.69997 61.4 6.29997 61.4Z',
          length: '70%',
          width: 10,
          offsetCenter: [0, '15%'],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#50b7ff' },
              { offset: 1, color: '#1a6cfe' },
            ]),
          },
        },
        min: 0,
        max: 100,
      },
      {
        name: intl.formatMessage({ id: 'overviewPages.upperOfSOC' }),
        type: 'gauge',
        center: ['45%', '50%'],
        radius: '100%',
        detail: {
          formatter: (value: number | null) => {
            if (value === null || isNaN(value)) {
              return `{b|--}\n{a|${intl.formatMessage({ id: 'overviewPages.upperOfSOC' })}}`;
            }
            return `{b|${value}%}\n{a|${intl.formatMessage({ id: 'overviewPages.upperOfSOC' })}}`;
          },
          rich: {
            a: {
              fontSize: 12, // 整站SOC 字符的大小
              color: '#1A6CFE',
            },
            b: {
              fontSize: 18, // value 的大小
              color: '#1A6CFE',
              fontWeight: 'bold',
              lineHeight: '12',
            },
          },
          offsetCenter: [0, '70%'], // 调整位置
        },
        data: [{ value: stationSoc ? stationSoc : '--', name: '' }],
        min: 0,
        max: 100,
        axisLabel: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [
                stationSoc / 100,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#50b7ff' },
                  { offset: 1, color: '#1a6cfe' },
                ]),
              ],
              [1, '#F0F1F5'],
            ],
          },
        },
        axisTick: {
          splitNumber: 5,
          length: 3,
          lineStyle: {
            width: 1,
            color: '#d1d5e0',
          },
        },
        splitLine: {
          length: 10,
          lineStyle: {
            width: 2,
            color: '#d1d5e0',
          },
        },
        pointer: {
          icon: 'path://M11.4 54C10.3 42.8 6.29997 0 6.29997 0C6.29997 0 2.29997 42.8 1.09997 54C0.799972 57.4 0.899972 59.3 0.899972 59.3C1.19997 61.9 3.39997 64 6.19997 64C8.99997 64 11.3 61.9 11.5 59.3C11.6 59.3 11.7 57.5 11.4 54ZM6.29997 61.4C4.79997 61.4 3.69997 60.3 3.69997 58.9C3.69997 57.6 4.89997 56.5 6.29997 56.5C7.69997 56.5 8.89997 57.6 8.89997 58.9C8.89997 60.3 7.69997 61.4 6.29997 61.4Z',
          length: '70%',
          width: 10,
          offsetCenter: [0, '15%'],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#50b7ff' },
              { offset: 1, color: '#1a6cfe' },
            ]),
          },
        },
      },
    ],
  });

  const isWide = useMediaQuery('(max-width: 1620px)');
  const isCenter = isWide ? 'center' : 'start';

  const isEnglish = intl.locale === 'en-US';
  // const className = `${isEnglish ? Styles.BatteryItemTilteEn : ''}`;
  const divWidth = isOldStation ? '180px' : isEnglish ? '140px' : '180px';
  const divHeight = isOldStation ? '156px' : isEnglish ? '110px' : '156px';
  // const locationClassName = `${Styles.BatteryLocation} ${
  //   isEnglish ? Styles.BatteryLocationEn : ''
  // }`;
  return (
    <Flex justify={isCenter} align="center">
      <div style={{ width: divWidth, flexShrink: '0' }}>
        <ReactECharts
          option={getOptions()}
          style={{ padding: 0, margin: 0, width: '100%', height: divHeight }}
        />
      </div>
      <div className={cls(isOldStation && Styles.OldStation, Styles.batteryInfoItem)}>
        <div className={Styles.batteryItem}>
          <p>{intl.formatMessage({ id: 'overviewPages.maxTemperatureDifferenceBox' })}</p>
          <div className={Styles.batteryItemValue}>
            <span>{temperature?.boxName ?? '--'}</span>
            <span>
              Max{' '}
              <span className={Styles.batteryItemValueUnitMax}>{temperature?.max ?? '--'}℃</span>
            </span>
            <span>
              Min{' '}
              <span className={Styles.batteryItemValueUnitMin}>{temperature?.min ?? '--'}℃</span>
            </span>
          </div>
        </div>
        <div className={Styles.batteryItem}>
          <p>{intl.formatMessage({ id: 'overviewPages.maxVoltageDifferenceBox' })}</p>
          <div className={Styles.batteryItemValue}>
            <span>{voltageExtreme?.boxName ?? '--'}</span>
            <span>
              Max <span>{voltageExtreme?.max ?? '--'}V</span>
            </span>
            <span>
              Min <span>{voltageExtreme?.min ?? '--'}V</span>
            </span>
          </div>
        </div>
        <div className={Styles.batteryItem}>
          <p>{intl.formatMessage({ id: 'overviewPages.maxCurrentDifferenceBox' })}</p>
          <div className={Styles.batteryItemValue}>
            <span>{currentExtreme?.boxName ?? '--'}</span>
            <span>
              Max <span>{currentExtreme?.max ?? '--'}A</span>
            </span>
            <span>
              Min <span>{currentExtreme?.min ?? '--'}A</span>
            </span>
          </div>
        </div>
        <div className={Styles.batteryItem}>
          <p>{intl.formatMessage({ id: 'overviewPages.maxSocDifferenceBox' })}</p>
          <div className={Styles.batteryItemValue}>
            <span>{soc?.boxName ?? '--'}</span>
            <span>
              Max <span>{soc?.max ?? '--'}%</span>
            </span>
            <span>
              Min <span>{soc?.min ?? '--'}%</span>
            </span>
          </div>
        </div>
      </div>
    </Flex>
  );
};

export default BatteryInfo;
